<template>
    <div>
        购物车页
        <hr />
        <p>count:{{ count }}</p>
        <p><button @click="addcount">count++</button></p>
        <hr />
        <ul>
            <li v-for="item in heroArr" :key="item">{{ item }}</li>
        </ul>
        <hr />
        <p>计算属性: {{ doubleCount }}</p>
    </div>
</template>

<!-- 
  setup 语法糖写法
  // 直接在 script 标签上添加 setup 属性即可
  特点: 不需要使用return 将数据个方法导出了,直接写就可以
 -->

<script setup>

import { ref, reactive, computed } from 'vue';
import { useRoute } from 'vue-router'
const count = ref(0);
console.log(count);
const addcount = () => {
    count.value++
}
const heroArr = reactive(['宫本武藏', '德川家康', '鲁班大师'])

// 使用计算属性
const doubleCount = computed(() => {
    // 该return 的值就是该计算属性的值
    console.log('计算属性计算了');
    return count.value * 2
})


const route = useRoute()
console.log('route', route.query);





</script>
<style scoped>

</style>